
<template>
  <div class="gouwudingdan">
    <div v-if="!dizhikong" class="gouwudingdantop">
      <span>收货人信息{{shiyong}}</span>
      <div @click="adddizhi" class="huang">使用新的地址</div>
    </div>
    <div v-if="!dizhikong" class="dizhi">
      <form action method="get">
        <shouhuodizhi
          v-for="(item,index) in dizhi"
          v-show="index<dizhizhanshi"
          :item="item"
          :isxianshi="true"
          :key="item.id"
          @xiugai="qingqiu($event,index)"
          @xianzhe="shiyong=$event"
          @shezhimoren="chongxinzhanshi"
          :shiyong="shiyong"
        />
      </form>
      <div class="lvse">
        <span @click="dizhizhanshi=100">展开其他地址 ↓</span>
        <span @click="dizhizhanshi=4">收起地址 ↑</span>
      </div>
    </div>
    <div v-else>
      <adddizhi
        @dizhigaibian="dizhigaibian($event)"
        @dizhigengai="chongxinzhanshi"
        :dizhishuju="dizhishuju"
      />
    </div>
    <div class="zhuti">
      <div class="zhuticoll">
        <div class="zhuticollnav">商品信息</div>
        <div class="zhuticollnavxia" v-for="itmes in shu" :key="itmes.id">
          <gouwucheliebiaomaincoll :itme="itmes" />
          <div class="zhuticollbottom">
            <div class="zhuticollnav">开票信息</div>
            <div>
              <input id="yao" name="nicai" type="radio" />
              <label for="yao">不需要</label>
              <input id="ren" name="nicai" type="radio" />
              <label for="ren">个人</label>
              <input id="dan" name="nicai" type="radio" />
              <label for="dan">单位</label>
            </div>
            <div class="inp">
              发票抬头:
              <input type="text" />
              <span class="hong">*</span>请填写后认真核对发票信息
            </div>
            <div class="bottominp">
              <div class="zhuticollnav">添加订单信息</div>
              <input placeholder="限45个字，请填写有关商品，支付，发票等信息" type="text" />
            </div>
          </div>
        </div>
      </div>
      <div class="zhutibottom">
        <div class="lvse">次日达·礼拜五专享</div>
        <div>
          选择送达时间:
          <span>
            2016年9月18日
            <span>12:00~3:00</span>
            <span class="lvse">
              <i class="iconfont icon-icon_xie"></i> 点击修改
            </span>
          </span>
        </div>
        <div class="zhankong"></div>
      </div>
      <div class="gouwudingdanbottom">
        <div>
          实付金额 :
          <span class="qian">￥{{zongzong(shu)}}</span>
        </div>
        <div>
          订单完成后可获得积分:
          <span class="huodejifen">{{Math.ceil(zongzong(shu)/10)}}积分</span>
        </div>
        <div>
          <span class="huang" @click="tijiao">提交订单</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import shouhuodizhi from "@/components/shouhuodizhi.vue";
import gouwucheliebiaomaincoll from "@/components/gouwucheliebiaomaincoll.vue";
import adddizhi from "@/components/adddizhi.vue";
import "@/assets/font/iconfont.css";
import axios from "axios";
export default {
  data() {
    return {
      shiyong: 1,
      kong: {
        name: "",
        prov: "",
        city: "",
        district: "",
        dizhixiangqing: "",
        phone: "",
        telephone: "",
        quma: "",
        morenis: 1,
        add: true
      },
      dizhishuju: {
        name: "",
        prov: "",
        city: "",
        district: "",
        dizhixiangqing: "",
        phone: "",
        telephone: "",
        quma: "",
        morenis: 1
      },
      dizhikong: false,
      qingqiushuju: false,
      xiugai: {},
      shu: JSON.parse(localStorage.dingdanshuju) ||
      [
        // 没链接数据库可以使用假数据，关闭注释
        {
          id: 1,
          name: "爱果果水果店",
          isxuanzhong: true,
          nini: [
            {
              id: 1,
              goodname: "爱果果水果店",
              guige: "8个装",
              danjia: "566",
              shiliang: 1,
              imgurl: "banner-13.png",
              isxuanzhong: true
            },
            {
              id: 2,
              goodname: "爱果果水果店",
              guige: "8个装",
              danjia: "566",
              shiliang: 1,
              imgurl: "banner-13.png",
              isxuanzhong: true
            },
            {
              id: 3,
              goodname: "爱果果水果店",
              guige: "8个装",
              danjia: "566",
              shiliang: 1,
              imgurl: "banner-13.png",
              isxuanzhong: true
            }
          ]
        },
        {
          id: 2,
          name: "爱果果水果店",
          isxuanzhong: true,
          nini: [
            {
              id: 1,
              goodname: "爱果果水果店",
              guige: "8个装",
              danjia: "566",
              shiliang: 1,
              imgurl: "banner-13.png",
              isxuanzhong: true
            },
            {
              id: 2,
              goodname: "爱果果水果店",
              guige: "8个装",
              danjia: "566",
              shiliang: 1,
              imgurl: "banner-13.png",
              isxuanzhong: true
            },
            {
              id: 3,
              goodname: "爱果果水果店",
              guige: "8个装",
              danjia: "566",
              shiliang: 1,
              imgurl: "banner-13.png",
              isxuanzhong: true
            }
          ]
        }
      ],
      dizhizhanshi: 4,
      dizhi: [
        {
          id: 1,
          name: "但小兵",
          prov: "北京",
          city: "北京市",
          district: "昌平区",
          dizhixiangqing: "天通苑明天第一城4号楼101",
          quma: "010",
          phone: "",
          telephone: "1234567890",
          morenis: 1
        },
        {
          id: 2,
          name: "但小兵",
          prov: "北京",
          city: "北京市",
          district: "昌平区",
          dizhixiangqing: "天通苑明天第一城4号楼101",
          quma: "010",
          phone: "",
          telephone: "1234567890",
          morenis: 0
        },
        {
          id: 3,
          name: "你猜",
          prov: "河南",
          city: "郑州",
          district: "中原区",
          dizhixiangqing: "天通苑明天第一城4号楼101",
          quma: "010",
          phone: "",
          telephone: "1234567890",
          morenis: 0
        },
        {
          id: 4,
          name: "但小兵",
          prov: "北京",
          city: "北京市",
          district: "昌平区",
          dizhixiangqing: "天通苑明天第一城4号楼101",
          quma: "010",
          phone: "",
          telephone: "1234567890",
          morenis: 0
        },
        {
          id: 5,
          name: "但小兵",
          prov: "北京",
          city: "北京市",
          district: "昌平区",
          dizhixiangqing: "天通苑明天第一城4号楼101",
          quma: "010",
          phone: "",
          telephone: "1234567890",
          morenis: 0
        }
      ]
    };
  },
  components: {
    shouhuodizhi,
    gouwucheliebiaomaincoll,
    adddizhi
  },
  mounted() {
    window.console.log(JSON.parse(localStorage.dingdanshuju))
    var _this = this;
    var url = this.$store.state.url;
    axios.get(url + "dizhi").then(
      res => {
        // 成功回调
        if (res.data.code == "200") {
          _this.dizhi = res.data.data;
        }
      },
      res => {
        window.console.log(res);
        // 错误回调
      }
    );
  },
  methods: {
    zongzong(e) {
      var zongzong = 0;
      e.map(function(items) {
        zongzong += 5;
        // 每个商家运费5快
        items.nini.map(function(item) {
          // 单价*数量累加的总数
          zongzong += item.danjia * item.shiliang;
        });
      });
      return zongzong;
    },
    dizhigaibian(e) {
      this.dizhishuju.prov = e.prov;
      this.dizhishuju.city = e.city;
      this.dizhishuju.district = e.district;
    },
    chongxinzhanshi() {
      this.dizhikong = false;
      var _this = this;
      var url = this.$store.state.url;
      axios.get(url + "dizhi").then(
        res => {
          // 成功回调
          if (res.data.code == "200") {
            _this.dizhi = res.data.data;
          }
        },
        res => {
          window.console.log(res);
          // 错误回调
        }
      );
    },
    tijiao() {
      alert("数据提交");
      this.$store.commit("zongzong", this.$options.methods.zongzong(this.shu));
      localStorage.shiyong = this.shiyong
      this.$router.push("gouwuchetijiao");
    },
    qingqiu(e, i) {
      // dizhikong;
      this.dizhishuju = this.dizhi[i];
      this.dizhikong = true;
    },
    adddizhi() {
      this.dizhishuju = this.kong;
      window.console.log(this.dizhishuju);
      this.dizhikong = true;
    }
  },
  watch: {
    dizhi(e) {
      var _this = this
      e.map(function(e) {
        if(e.morenis==1){
          _this.shiyong = e.id
        }
      })
    }
  }
};
</script>
<style scoped>
.gouwudingdan {
  width: 80%;
  margin: 0px auto;
}
.gouwudingdantop {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0px;
}
.gouwudingdantop span {
  font-size: 1.2rem;
}
.huang {
  padding: 0.5rem 1.5rem;
  background-color: #f08200;
  color: #fff;
  border-radius: 3px;
  margin-left: 1rem;
  cursor: pointer;
}
.lvse {
  color: #498e3d;
  cursor: pointer;
}
.dizhi {
  margin-bottom: 1rem;
}
.zhuticollnav {
  line-height: 3rem;
}
.zhuticollbottom label {
  margin-right: 2rem;
}
.zhuticollbottom .inp {
  border-bottom: 1px solid #ccc;
  padding: 1rem 0px;
}
.inp input {
  width: 30%;
  height: 2rem;
}
.zhuticollnav + input {
  width: 46%;
  color: #999;
  height: 2rem;
}
.hong {
  color: red;
  margin-left: 1rem;
}
.bottominp {
  padding-bottom: 1rem;
  border-bottom: 1px solid #ccc;
}
.zhutibottom > div.lvse {
  font-size: 1.1rem;
  line-height: 3rem;
}
.zhutibottom > div.lvse + div span.lvse {
  margin-left: 2rem;
  cursor: pointer;
}
.zhutibottom {
  border-bottom: 1px solid #ccc;
}
.zhankong {
  height: 6rem;
}
.gouwudingdanbottom {
}
.gouwudingdanbottom > div {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 2rem 0px;
}
.qian {
  color: #ff5757;
  font-size: 1.2rem;
}
</style>